<template>
  <div class="SecondComp">
    <el-card shadow="hover">
      <template #header>
        <!-- 1.菜单 -->
        <el-menu
          mode="horizontal"
          :default-active="activeIndex"
          @select="handleSelect">
          <el-menu-item index="sales">销售额</el-menu-item>
          <el-menu-item index="visit">访问量</el-menu-item>
        </el-menu>
        <div class="right">
          <!-- 2.按钮组 -->
          <el-radio-group v-model="radio">
            <el-radio-button label="今日" value="今日"></el-radio-button>
            <el-radio-button label="本周" value="本周"></el-radio-button>
            <el-radio-button label="本月" value="本月"></el-radio-button>
            <el-radio-button label="今年" value="今年"></el-radio-button>
          </el-radio-group>
          <!-- 3.日期选择 -->
          <el-date-picker
            v-model="daterange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            range-separator="至"
            :shortcuts="shortcuts">
          </el-date-picker>
        </div>
      </template>
      <template #default>
        <div class="container">
          <div class="leftChart">
            <v-chart :option="option"></v-chart>
          </div>
          <div class="rightList">
            <div class="title">排行榜</div>
            <div v-for="item in rankLists" :key="item.no" class="listItem">
              <span :class="{ highlight: item.no <= 3 }">{{ item.no }}</span>
              <span>{{ item.title }}</span>
              <span>{{ item.sales }}</span>
            </div>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
// http://project.x-zd.net:3001/apis/saledata
import { ref, onMounted } from 'vue'
import { getSalesData } from '@/api'
const activeIndex = ref('sales')
const radio = ref('今日')
const daterange = ref('')
const option = ref({})

const salesData = ref('')
const rankLists = ref('')
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

const renderChart = (V1, V2) => {
  option.value = {
    title: {
      text: '年度销售额',
      textStyle: {
        fontSize: '14px',
      },
    },
    xAxis: {
      type: 'category',
      data: V1,
      /* 控制刻度线是否与标签对齐 */
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      type: 'value',
      /* 控制横线样式 */
      splitLine: {
        lineStyle: {
          type: 'dotted',
        },
      },
    },
    tooltip: {},
    grid: {
      left: 40,
      right: 40,
    },
    series: {
      type: 'bar',
      name: '销售额',
      data: V2,
      itemStyle: {
        color: 'skyblue',
      },
      barWidth: '40%',
    },
  }
}
const handleSelect = (index) => {
  const {
    saleFulleYear,
    saleFulleYearAxis,
    saleRank,
    visitFullYear,
    visitFullYeadAxis,
    visitRank,
  } = salesData.value

  if (index == 'sales') {
    renderChart(saleFulleYearAxis, saleFulleYear)
    rankLists.value = saleRank
  } else if (index == 'visit') {
    renderChart(visitFullYeadAxis, visitFullYear)
    rankLists.value = visitRank
  }
}
onMounted(async () => {
  salesData.value = await getSalesData()
  const { saleFulleYear, saleFulleYearAxis, saleRank } = salesData.value
  renderChart(saleFulleYearAxis, saleFulleYear)

  rankLists.value = saleRank
})
</script>

<style lang="scss" scoped>
.SecondComp {
  margin-top: 20px;
  :deep(.el-card__header) {
    position: relative;
    padding: 0;
    border-bottom: none;
    .el-menu {
      padding-left: 50px;
    }
    .right {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      font-size: 0;
      .el-radio-group {
        margin-right: 10px;
      }
    }
  }
  .container {
    display: flex;
    .leftChart {
      flex: 0 0 70%;
      height: 434px;
    }
    .rightList {
      flex: 1;
      .title {
        font-size: 14px;
        font-weight: 600;
      }
      .listItem {
        display: flex;
        align-items: center;
        gap: 20px;
        margin: 20px 0;
        span {
          font-size: 14px;
          color: #464545;
          &:nth-child(1) {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
          }
          &:nth-child(2) {
            flex: 1;
          }
          &.highlight {
            background-color: #09b3f7;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
